/* menuData应该是使用ajax从后端获取,而不是写死在前端 */
var menuData = null;
let menuVersion = null;
/* 当文档加载成功后,就请求菜单列表数据 */
/* 菜单这种数据基本是常年不会变的数据--> 冷数据 */
/* 对于这种冷数据,不必每次都向后端要数据,因为后端可能每次返回给你的结果都是一样的*/
/* 所以采用缓存的策略, 把菜单列表数据缓存在浏览器中, 每次从缓存中读数据,
 * 如果缓存中的数据过期和被清除了, 再问后端要数据 */
/* 此处缓存使用localstorage对象, 不使用sessionstorage,也不使用cookie */
$(function (){
    /* 假设在localstorage中缓存的菜单数据的key是menuData, 假设value是json格式数据 */
    /* 再假设localstorage中缓存了菜单数据的版本,key是menuVersion */
    /* 取出来后把数据解析为json格式 */
    menuData = localStorage.getItem("menuData");
    menuData = menuData == "undefined" ? null:JSON.parse(menuData);
    menuVersion = localStorage.getItem("menuVersion");
    menuVersion = menuVersion == "undefined" ? null:JSON.parse(menuVersion);
    /* 判断menuData,如果为空,说明本地没有它的缓存, 则发起ajax请求后端要菜单数据 */
    if(menuData == null || menuData == "")
    {
        queryMenuData();
    }else if(menuVersion != null)
    {
        queryMenuVersion();
    }
    /* 因为ajax是异步的, 所以 loadMenu()可以会在ajax没有返回之前就执行了, 此时menuData可能没有数据 */
    /* 1. 把 loadMenu()放到ajax的回调函数中执行 2. 把ajax改为同步执行*/
    loadMenu();
})
/* 查询菜单数据 */
function queryMenuData()
{
    var request = {
        url:baseUrl+'menu',
        type:'GET',
        data:{
            action:'list'
        },
        dataType:'json',
        async:false,  // async表示设置ajax是否异步处理, 默认是true,是异步的,这里改为false后,ajax变为同步的
        success:function (responseBody){
            // 把响应体中的菜单数据转为json格式后缓存到localstorage中
            localStorage.setItem("menuData",JSON.stringify(responseBody.data.menuData));
            localStorage.setItem("menuVersion",JSON.stringify(responseBody.data.menuVersion));
            menuData = responseBody.data.menuData;
            menuVersion = responseBody.data.menuVersion;
        }
    };
    $.ajax(request);
}
/* 查询菜单数据版本 */
function queryMenuVersion()
{
    /* 说明本地localstorage有菜单数据的缓存,是否直接使用呢?错,应该查一下版本有没有更新*/
    var request = {
        url:baseUrl+"menu",
        type:'get',
        data:{
            action: 'version'
        },
        dataType: 'json',
        async:false,
        success:function (responseBody)
        {
            /* responseBody.data 是响应报文中返回的数据库中menu数据的版本号 */
            /* menuVersion 是本地localstorage中缓存的menu数据的版本好*/
            if(responseBody.data != menuVersion)
            {
                queryMenuData();
            }
        }
    }
    $.ajax(request);
}

/* 加载菜单 */
function loadMenu()
{
    /*定义变量menuHtml，用来拼接菜单数据为html代码*/
    let menuHtml = "<div>"; /* 菜单面板的开始 */
    /* menuData变量中存储的是后端响应报文中返回过来的菜单列表数据,迭代它*/
    for(let i=0;i<menuData.length;i++)
    {
        if(menuData[i].parentId==0) // 说明是一级菜单
        {
            menuHtml +="<div class='level1-menu' data-state ='false'>";     //一级菜单开始
            menuHtml +="<span class='"+menuData[i].menuIcon+"'></span>";     //一级菜单图标
            menuHtml +="<span>"+menuData[i].menuName+"</span>";     //一级菜单名称
            menuHtml +="<span  class='glyphicon pull-right glyphicon-menu-left'></span>";     //一级菜单右侧状态图标()表示打开和关闭
            menuHtml +="</div>";
        }else
        {
            menuHtml +="<div class='level2-menu'>";
            menuHtml +="<a href='"+menuData[i].menuUrl+"'>";    //每个二级菜单是一个超链接
            menuHtml +="<span class='"+menuData[i].menuIcon+"'></span>";  //二级菜单图标
            menuHtml +="<span>"+menuData[i].menuName+"</span>";  //二级菜单名称
            menuHtml +="</a>";
            menuHtml +="</div>";    //二级菜单结束
        }
    }
    menuHtml +="</div>"; /* 菜单面板的结束 */
    /*把拼接好的html插入到菜单的容器中*/
    $("#left-menu").append($(menuHtml));
    //2级菜单隐藏起来，不会有过度，show()是显示，不会有过度
    $(".level2-menu").hide();
    $(".level1-menu").click(function (){
        var state = $(this).attr("data-state")
        if (state =="true")   //展开的   js允许字符串与Boolean的值进行比较
        {
            $(this).attr("data-state","false");//把自定义属性data-state的值设为false
            $(this).next().stop().slideUp();
            $(this).children("span:last").removeClass("glyphicon-menu-down")
            $(this).children("span:last").addClass("glyphicon-menu-left")
        }else               //收起来的 ---> 展开
        {
            $(this).attr("data-state","true");  //把自定义属性data-state的值设为true
            $(this).children("span:last").removeClass("glyphicon-menu-left");
            $(this).children("span:last").addClass("glyphicon-menu-down");
            $(this).next().stop().slideDown();  //.slideDown()滑动方式展开下一个元素
            $(this).siblings("div.level1-menu").attr("data-state","false")  //siblings()获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器
            $(this).siblings("div.level1-menu").each(function ()
            {
                $(this).children("span:last")
                    .removeClass("glyphicon-menu-down")
                    .addClass("glyphicon-menu-left")
            })
            $(this).next().siblings("div.level2-menu").slideUp();
        }
    })
}